<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>room</title>
        <!-- 记得要写成 /css/public/header.css -->
        <!-- css/public/header.css 前边有个斜杠，说明是相对于根目录的 -->
        <link rel="stylesheet" href="/bootstrap-4.3.1-dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="/css/public/header.css">
        <link rel="stylesheet" href="/css/public/prolist.css">
        <link rel="stylesheet" href="/css/product.css">
        <script src="/js/jquery-3.3.1.min.js"></script>
        <script src="/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    </head>
    <body>
        <%- include public/header.html %>
        <div class="main-content">
            <%- include public/leftU.html %>

            <div class="product-page">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">宿舍数据</a></li>
                        <li class="breadcrumb-item active" aria-current="page">水电信息</li>
                    </ol>
                </nav>
                <div class="card mb-3" style="width: 100%;">
                    <div class="card-header">搜索</div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item" style="display:flex;justify-content:space-between;align-items:center;">
                            <form class="form-inline" enctype="multipart/form-data" action="/room/search" method="GET">
                                    名称
                                <input type="text" class="form-control mx-2" name="name" placeholder="input ProductName">
                                <input type="submit" class="form-control" value="开始搜索">
                            </form>
                            <div>
                                <a href="/room/previous" class="btn btn-success mr-2">上一页</a>
                                <a href="/room/next" class="btn btn-danger">下一页</a>
                            </div>
                        </li>
                    </ul>
                </div>
                <table class="table table-light table-striped">
                    <thead>
                        <tr>
                        <th class="text-center" scope="col">序号</th>
                        <th class="text-center" scope="col">月份</th>
                        <!-- <th class="text-center" scope="col">商品图片</th> -->
                        <th class="text-center" scope="col">当月用水量</th>
                        <th class="text-center" scope="col">当月用电量</th>
                        <th class="text-center" scope="col">当月收费</th>

                        <!-- <th class="text-center" scope="col">当前余额</th> -->
                        <th class="text-center" scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% list.map((el,index)=>{ %>
                            <tr class="protop">
                                <th class="text-center proitem" scope="row"><%= index+1 %></th>
                                <td class="text-center proitem"><%= el.month %></td>
                                <td class="text-center proitem"><%= el.waterC %></td>
                                <td class="text-center proitem"><%= el.ecleC %></td>
                                <td class="text-center proitem"><%= el.cost %></td>
                                


                                <td class="text-center proitem">
                                    <!-- <button class="btn btn-success">修改</button> -->

                                    <!-- 思想很重要，为了找到这个商品，应该好好利用商品的唯一标识 _id 这个属性     href="/product/productedit?id=<%= el._id %>"  /product/productdelete?id=<%= el._id %>-->
                                    <a href=“” class="btn btn-success">缴费</a>
                                    <!-- <button class="btn btn-primary">删除</button> -->
                                    <a href="" class="btn btn-primary">退款</a>
                                </td>
                            </tr>
                        <% }) %>

                            
                        
                        
                    </tbody>
                </table>
            </div>
            <div class="card mb-3" style="margin-left: 20px;min-width: 20%">
                <div class="card-header">
                  账户信息
                </div>
                <% list.map((el,index)=>{ %>
                <div class="card-body">
                  <h3 class="card-title" name="Uname"><%= el.name %></h3>
                  <h5 class="card-text"name=“Ubuilding”><%= el.building %>幢</h5>
                  <h5 class="card-text"name=Uroom></h5><%= el.door %>室</h5>
                  <h5 class="card-text" name="Ubalance">当前余额：<%= el.balance %></h5>
                  <a href="#" class="btn btn-primary">去充值</a>
                </div>
                <% }) %>
              </div>
        </div>
    </body>
</html>